<template>
  <div class="login-content">
    <div class="login-box">
      <p class="login-text">系统登录</p>
      <p>
        <el-input prefix-icon="el-icon-user-solid" v-model="user"></el-input>
      </p>
      <p>
        <el-input
          prefix-icon="el-icon-lock"
          v-model="passwrod"
          show-password
        ></el-input>
      </p>
      <p>
        <el-button type="primary" style="width: 100%" @click="clicklogin"
          >登录</el-button
        >
      </p>
      <p v-show="show" class="info">X 登录失败!请检查账号和密码是否正确</p>
    </div>
    <slide-verify 
             ref="verify"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            slider-text="向右滑动登录"
            v-show="showverify"
            ></slide-verify>
  </div>
</template>

<script>
import { login } from "../apis/user";
export default {
  
  data() {
    return {
      user: "",
      passwrod: "",
      show:false,
      showverify:false
    };
  },
  methods: {
    clicklogin() {

      this.showverify=true
      
      
    },
    onSuccess(){
      login({account:this.user,password:this.passwrod}).then((res)=>{
       if(res.data.code==0){
         //保存id
         localStorage.id=res.data.id;
         //保存时效令牌
          localStorage.token=res.data.token;
          //保存用户权限
          localStorage.role=res.data.role;

         this.$message({
          message: '欢迎你,'+this.user+ ' 登录成功!',
          type: 'success'
        });
        
         this.$router.push("/home/main"); 
       }else{
         this.show=true
       }
      })
      this.showverify=false
      this.$refs.verify.reset();
    },
    onFail(){
      this.$message({message:"臭臭世界系统提示:验证码错误!!!",center:true})
      this.showverify=false
    },
    onRefresh(){
      this.$message({message:"验证码刷新成功",center:true})
    }
  },
};
</script>
<style lang="less" scoped>
.login-content {
  width: 100%;
  height: 100%;
  background: #000033;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.login-box {
  width: 350px;
  height: 200px;
  // background: rgba(255, 255, 255, 0.63);
}
.login-user {
  margin-bottom: 20px;
}

.login-text {
  text-align: center;
  font-size: 18px;
  color: #fff;
}
p {
  margin-bottom: 20px;
}
.info{
  text-align: center;
  color: #fff;
}
#slideVerify{
  position: fixed;
  background: rgba(255, 255, 255, 0.664);
  margin-top: -7px;
  
}
</style>